<template>
  <div class="bank-card-unbind-wrap-process2">

    <div class="photo-upload-box">
      <div class="photo-box">
        <img src="./card_scan.png" class="pic1"/>
        <input type="file" accept="image/*" capture="camera" class="upload-file" @change="changePhoto($event)"/>
      </div>
      <span class="tip1">扫描银行卡信息</span>
      <span class="tip2">无原件，可手动输入银行卡信息</span>
    </div>

    <div class="bank-real-info">
      <div class="bank-real-name">
        <div class="phone-box">
          <span class="title">银行名称</span>
          <div class="phone-con">
            <!--<input type="text" class="phone-num" placeholder="请输入银行名称" maxlength="20" v-model="bankName"-->
            <!--@input="checkScanBankName"/>-->
            <popup-picker :data="bankNameList" v-model="bankName" class="phone-num" placeholder="请选择银行名称"></popup-picker>
          </div>
          <!--<img src="../../../images/close.png" class="pic2" v-show="bankIcon == 1"/>-->
          <img src="../../../images/in.png" class="pic3"/>
        </div>
      </div>

      <div class="bank-real-name">
        <div class="phone-box">
          <span class="title">银行卡号</span>
          <div class="phone-con">
            <input type="text" class="phone-num" placeholder="请输入正确的银行卡号码" maxlength="18" v-model="bankNum"
                   @input="checkScanCardNum"/>
          </div>
          <img src="../../../images/close.png" class="pic2" v-show="cardIcon == 1"/>
        </div>
      </div>

      <div class="bank-real-name">
        <div class="phone-box">
          <span class="title">卡归属地</span>
          <x-address :title="title" v-model="bankAddress" :list="addressData" placeholder="请选择银行卡归属地"
                     @on-hide="selectArea" :hide-district="hideDistrict"
                     id="belongAddr" class="address-box"></x-address>
          <img src="../../../images/in.png" class="pic3"/>
        </div>
      </div>

    </div>

    <div class="photo-scan-warp" v-show="photoShow">
      <div class="photo-scan-box">
        <img :src="bankPhoto" class="photo-scan" onclick="return false"/>
        <span class="discern-scan">正在识别中...</span>
      </div>
    </div>

    <button class="sure-text" type="button" @click="changeCardEnd">更&nbsp;绑</button>

    <v-dialog v-model="modalVal" :content="modal" type="default" @sure="chance"></v-dialog>
    <v-dialog v-model="sendVal" :content="content" type="default" @sure="sure"></v-dialog>

  </div>
</template>

<script>
  import {getBase64, getNowFormatDate, removeSessionStore} from "../../../config/util";
  import {bindUnbindBankCard, getBankAccessToken, getBankScan} from "../../../axios/api";
  import dialog from "../../../components/dialog";
  import {ChinaAddressV4Data, XAddress} from 'vux'
  import {checkBankArea} from "../../../config/verify";
  import {PopupPicker} from 'vux';

  export default {
    data() {
      return {
        photoShow: false,
        bankPhoto: "",
        assessToken: "",
        modalVal: false,
        sendVal: false,
        modal: "",
        content: "",
        bankName: [],
        bankNameList: [["中国建设银行", "招商银行", "兴业银行"]],
        bankNum: "",
        title: '',
        hideDistrict: true,
        bankAddress: [],
        addressData: ChinaAddressV4Data,
        bankIcon: 0,
        cardIcon: 0,
        openAddress: "",
        certNum: this.$route.query.certNum,
        userName: this.$route.query.userName
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
      this.queryAccessToken();
    },
    methods: {
      chance() {
        this.modalVal = false;
      },
      sure() {
        this.sendVal = false;
      },
      // checkScanBankName() {//校验姓名
      //   let reg1 = /^[\u2E80-\u9FFF]+$/;
      //   if (!reg1.test(this.bankName)) {
      //     this.bankIcon = 1;
      //   } else {
      //     this.bankIcon = 0;
      //   }
      // },
      checkScanCardNum() {//校验银行卡号
        let reg = /^(\d{16}|\d{17}|\d{18}|\d{19})$/;
        if (!reg.test(this.bankNum)) {
          this.cardIcon = 1;
        } else {
          this.cardIcon = 0;
        }
      },
      queryAccessToken() {//获取银行卡扫描token
        let data = {
          "sgin": this.userMark
        };
        getBankAccessToken(data).then((res) => {
          if (res.code == 0) {
            this.assessToken = this.$decruption(res.data);
          }
        });
      },
      changePhoto(e) {//显示图片
        if (e.target.files.length > 0) {
          getBase64(e.target, (url) => {
            this.bankPhoto = 'data:image/png;base64,' + url;
            this.photoShow = true;
            setTimeout(() => {
              this.uploadBankPhoto();
            }, 50);
          })
        }
      },
      uploadBankPhoto() {//百度API识别
        this.$vux.loading.show({
          text: '加载中',
        });
        let image = this.bankPhoto.split(",")[1];
        let virValue = getNowFormatDate(this.userMark);
        let data = {
          "image": image,
          "accessToken": this.assessToken,
          "virValue": this.$encruption(virValue),
          "type": 2,
          "sgin": this.userMark
        };

        getBankScan(data).then((res) => {
          this.photoShow = false;
          this.bankPhoto = "";
          this.$vux.loading.hide();
          if (res.code == 0) {
            if (res.data.result.bank_card_type != 1) {
              this.$vux.toast.text("工资卡必须为借记卡！", "middle");
            } else {
              let bankName = res.data.result.bank_name;
              if (bankName.indexOf("招商") == -1 && bankName.indexOf("建设") == -1 && bankName.indexOf("兴业") == -1) {
                this.content = "本平台工资卡绑定仅支持中国建设银行、招商银行或者兴业银行的银行卡，若没有此三种银行卡，请联系驻厂老师或者客服人员为您办理。";
                this.modalVal = true;
              } else {
                this.bankName.push(bankName);
                this.bankNum = res.data.result.bank_card_number;
              }
            }
          } else {
            if (res.code == 216631) {
              this.$vux.toast.text(res.data.error_msg + '【' + res.data.error_code + '】', "middle");
            } else {
              this.$vux.toast.text(res.msg, "middle");
            }
          }
        });
      },
      selectArea(type, value) {//选择银行卡归属地
        if (type) {
          let array = value.split(" ");
          for (let i = 0; i < array.length; i++) {
            if (array[i] == "市辖区") {
              this.bankAddress.splice(1, i);
            }
          }
        }
      },
      changeCardEnd() {
        let address = document.getElementById("belongAddr").innerText.substring(0, 9);
        let area = address == "请选择银行卡归属地" ? "" : document.getElementById("belongAddr").innerText; //银行卡归属地
        let flag = checkBankArea(this.bankNum.replace(/\s*/g, ""), String(this.bankName), area);
        if (flag) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let array = area.split(" ");
          if (array.length == 1) {
            this.openAddress = array[0].replace('\n', "");
          } else {
            this.openAddress = area.replace(/\s*/g, "");
          }

          //绑定银行卡
          let data = {
            "sgin": this.userMark,
            "userName": this.userName,
            "identityNo": this.$encruption(this.certNum),
            "bankNumber": this.$encruption(this.bankNum.replace(/\s*/g, "")),
            "openBankAddr": this.openAddress,
            "moneyPassword": "",
            "type": 2,
            "bankName": String(this.bankName)
          };

          bindUnbindBankCard(data).then((res) => {
            this.$vux.loading.hide();
            if (res.code == 0 && res.data != null) {
              if (res.data.res_code == 0) {
                removeSessionStore("proxy_mark_01");
                this.$router.push("/mine");
              } else if (res.data.res_code == 20029) {
                this.modal = "很遗憾,今日绑定机会已使用完,请明日再进行绑定";
                this.modalVal = true;
              } else {
                this.content = "您今日还剩" + res.data.res_error_num + "次机会,请仔细核对您的信息(" + res.data.res_msg + ")";
                this.sendVal = true;
              }
            } else {
              this.$vux.toast.text(res.msg, "middle");
            }
          });
        }

      }
    },
    components: {
      "v-dialog": dialog,
      XAddress,
      PopupPicker
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .bank-card-unbind-wrap-process2 {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .photo-upload-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      .wh(100%, 5.893rem);
      margin-bottom: 0.267rem;
      background: #FFF;
      .photo-box {
        padding-top: 0.627rem;
        padding-bottom: 0.467rem;
        .wh(4.8rem, 3.2rem);
        position: relative;
        .pic1 {
          .wh(100%, 100%);
        }
        .upload-file {
          position: absolute;
          left: 0;
          top: 0.627rem;
          .wh(4.8rem, 3.2rem);
          opacity: 0;
          -ms-filter: 'alpha(opacity=0)';
          z-index: 100;
        }
      }
      .tip1 {
        .size-color(0.427rem, rgba(53, 183, 255, 1));
        padding-bottom: 0.213rem;
      }
      .tip2 {
        .size-color(0.347rem, rgba(153, 153, 153, 1));
      }
    }
    .bank-real-info {
      margin-bottom: 0.8rem;
      .bank-real-name {
        .wh(100%, 1.333rem);
        background: #FFF;
        display: flex;
        .phone-box {
          margin-left: 0.32rem;
          display: flex;
          align-items: center;
          .wh(96.8%, 1.333rem);
          border-bottom: 0.027rem solid #f2f2f2;
          .title {
            .size-color(0.427rem, #333333);
          }
          .phone-con {
            width: 60%;
            margin-left: 0.467rem;
            .phone-num {
              width: 100%;
              .size-color(0.427rem, #333333)
            }
            .phone-num /deep/ .vux-tap-active {
              padding: 0;
              width: 100%;
            }
            .phone-num /deep/ .vux-cell-primary .vux-popup-picker-placeholder {
              color: #ccc;
            }
            .phone-num /deep/ .weui-cell .vux-popup-picker-value,.vux-cell-value {
              color: rgba(68, 68, 68, 1);
            }
          }
          .pic2 {
            margin-left: auto;
            margin-right: 0.32rem;
            .wh(0.48rem, 0.48rem);
          }
          .pic3 {
            margin-left: auto;
            margin-right: 0.32rem;
            .wh(0.32rem, 0.32rem);
          }
          .address-box {
            .ellipsis(53%);
            display: flex;
            padding-top: 0.1rem;
            padding-bottom: 0.1rem;
            margin-left: 0.467rem;
            .size-color(0.427rem, #333333)
          }
          .address-box /deep/ .vux-tap-active {
            padding: 0;
            width: 100%;
          }
          .address-box /deep/ .weui-cell .vux-popup-picker-placeholder {
            color: #cccccc;
          }
          .address-box /deep/ .weui-cell .vux-popup-picker-value,.vux-cell-value {
            color: rgba(68, 68, 68, 1);
          }
        }

      }
    }
    .photo-scan-warp {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.5);
      .photo-scan-box {
        position: relative;
        width: 9.08rem;
        height: 5.92rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.107rem;
        .photo-scan {
          .wh(100%, 100%)
        }
        .discern-scan {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.48rem;
          color: #333;
          z-index: 100;
          font-weight: 500;
        }
      }
    }
    .sure-text {
      .fj(center, center);
      margin: 0 auto;
      .wh(9.04rem, 1.333rem);
      background: rgba(60, 175, 255, 1);
      border-radius: 0.107rem;
      .size-color(0.48rem, rgba(255, 255, 255, 1));
    }
  }
</style>
